<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="t('dbms.dicManager.valueTitle')"
    align-center
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-container>
      <el-aside width="200px">
        <el-scrollbar wrap-style="calc(100vh - 205px);">
          <el-tree
            ref="treeEl"
            style="max-width: 600px"
            :load="loadNode"
            :props="treeProps"
            :default-expanded-keys="['root']"
            :expand-on-click-node="false"
            node-key="id"
            lazy
            @node-click="clickTreeNode"
          >
            <template #default="{ node }">
              <template v-if="node.data.id == 'root'">
                <Icon icon="material-symbols:dictionary" color="#00FFFF" hoverColor="#00FFFF" />
              </template>
              <template v-else>
                <Icon icon="material-symbols:menu" color="#00DD00	" hoverColor="#00DD00	" />
              </template>
              <span class="ml-1">{{ node.label }}</span>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-aside>
      <WsmTable
        ref="table"
        v-model="queryFormType"
        load-url="/dbms-server/base/dictionaryinfo/page"
        :change-load="true"
      >
        <template #title>{{ name }}</template>
        <template #button="{ row }">
          <el-button type="primary" v-hasPermi="'addValue'" @click="addForm.show()">{{
            t('common.add')
          }}</el-button>
          <template v-if="row">
            <template v-if="row.id != 'TOP'">
              <el-button v-hasPermi="'updateValue'" @click="update(row.id)" type="primary">{{
                t('common.update')
              }}</el-button>
              <el-button v-hasPermi="'deleteValue'" @click="del(row.id)" type="danger">{{
                t('common.delete')
              }}</el-button>
            </template>
          </template>
        </template>
        <template #column>
          <el-table-column
            prop="activity"
            :label="t('dbms.dicManager.dicInfo.activity')"
            width="100"
          >
            <template #default="scope">
              <template v-if="scope.row.activity">
                <el-tag effect="dark" type="success">{{ t('dbms.dicManager.enable') }}</el-tag>
              </template>
              <template v-else>
                <el-tag effect="dark" type="danger">{{ t('dbms.dicManager.disable') }}</el-tag>
              </template>
            </template>
          </el-table-column>

          <el-table-column
            prop="isDefault"
            :label="t('dbms.dicManager.dicInfo.isDefault')"
            width="100"
          >
            <template #default="scope">
              <template v-if="scope.row.isDefault == '1'">
                <el-tag effect="dark" type="success">{{ t('dbms.dicManager.dicInfo.yes') }}</el-tag>
              </template>
              <template v-else>
                <el-tag effect="dark" type="danger">{{ t('dbms.dicManager.dicInfo.no') }}</el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column prop="id" :label="t('dbms.dicManager.dicInfo.id')" width="200" />
          <el-table-column prop="name" :label="t('dbms.dicManager.dicInfo.name')" width="200" />
          <el-table-column prop="note" :label="t('dbms.dicManager.dicInfo.note')" />
          <el-table-column
            prop="dicValue"
            :label="t('dbms.dicManager.dicInfo.dicValue')"
            width="250"
          />
        </template>
      </WsmTable>
    </el-container>

    <WsmForm
      ref="addForm"
      v-model="addData"
      submit-url="/dbms-server/base/dictionaryinfo/add"
      :width="600"
      :init-data="initData"
      label-width="100px"
      :title="t('dbms.dicManager.addValueTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="id" :label="t('dbms.dicManager.dicInfo.id')">
              <el-input v-model="form.id" :placeholder="t('dbms.dicManager.dicInfo.id')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="name" :label="t('dbms.dicManager.dicInfo.name')">
              <el-input v-model="form.name" :placeholder="t('dbms.dicManager.dicInfo.name')" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="color" :label="t('dbms.dicManager.dicInfo.color')">
              <el-color-picker v-model="form.color" show-alpha :predefine="predefineColors" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="dicValue" :label="t('dbms.dicManager.dicInfo.dicValue')">
              <el-input
                v-model="form.dicValue"
                :placeholder="t('dbms.dicManager.dicInfo.dicValue')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="isDefault" :label="t('dbms.dicManager.dicInfo.isDefault')">
              <el-radio-group v-model="form.isDefault">
                <el-radio value="0">{{ t('dbms.dicManager.dicInfo.no') }}</el-radio>
                <el-radio value="1">{{ t('dbms.dicManager.dicInfo.yes') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="activity" :label="t('dbms.dicManager.dicInfo.activity')">
              <el-radio-group v-model="form.activity">
                <el-radio value="0">{{ t('dbms.dicManager.disable') }}</el-radio>
                <el-radio value="1">{{ t('dbms.dicManager.enable') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="note" :label="t('dbms.dicManager.dicInfo.note')">
              <el-input
                type="textarea"
                v-model="form.note"
                :placeholder="t('dbms.dicManager.dicInfo.note')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>

    <WsmForm
      ref="updateForm"
      v-model="updateData"
      load-url="/dbms-server/base/dictionaryinfo/get"
      submit-url="/dbms-server/base/dictionaryinfo/update"
      :width="600"
      label-width="100px"
      :title="t('dbms.dicManager.updateValueTitle')"
      @success="flushed"
    >
      <template #default="{ form }">
        <el-row>
          <el-col :span="16">
            <el-form-item prop="name" :label="t('dbms.dicManager.dicInfo.name')">
              <el-input v-model="form.name" :placeholder="t('dbms.dicManager.dicInfo.name')" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="color" :label="t('dbms.dicManager.dicInfo.color')">
              <el-color-picker v-model="form.color" show-alpha :predefine="predefineColors" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="dicValue" :label="t('dbms.dicManager.dicInfo.dicValue')">
              <el-input
                v-model="form.dicValue"
                :placeholder="t('dbms.dicManager.dicInfo.dicValue')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="isDefault" :label="t('dbms.dicManager.dicInfo.isDefault')">
              <el-radio-group v-model="form.isDefault">
                <el-radio :value="0">{{ t('dbms.dicManager.dicInfo.no') }}</el-radio>
                <el-radio :value="1">{{ t('dbms.dicManager.dicInfo.yes') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="activity" :label="t('dbms.dicManager.dicInfo.activity')">
              <el-radio-group v-model="form.activity">
                <el-radio :value="false">{{ t('dbms.dicManager.disable') }}</el-radio>
                <el-radio :value="true">{{ t('dbms.dicManager.enable') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="note" :label="t('dbms.dicManager.dicInfo.note')">
              <el-input
                type="textarea"
                v-model="form.note"
                :placeholder="t('dbms.dicManager.dicInfo.note')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </WsmForm>
  </el-dialog>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType } from '@/components/WsmTable/src/types'
import { reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { DictionaryInfoType } from '@/api/dbms/dicmanager/types'
import { delInfoApi, getTreeChildDictionaryInfoApi } from '@/api/dbms/dicmanager'
import { ElMessageBox, ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'

const centerDialogVisible = ref<boolean>(false)

//默认颜色
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577'
])

const { t } = useI18n()

//列表标题
const name = ref(t('dbms.dicManager.valueTitle'))

const code = ref<string>('')

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  code: '',
  parentId: 'root',
  isDefault: '0',
  activity: '1'
})
const addData: FormDataType = reactive({
  id: '',
  parentId: 'root',
  code: '',
  name: '',
  dicValue: '',
  color: '',
  isDefault: '',
  note: '',
  activity: ''
})

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  parentId: 'root',
  code: '',
  name: '',
  dicValue: '',
  color: '',
  isDefault: 0,
  note: '',
  activity: true
}

const queryFormType: QueryFormType = {
  code: {
    value: 'root',
    clear: false
  },
  parentId: {
    value: 'root',
    clear: false
  }
}
const treeProps = {
  parentId: 'parentId',
  isLeaf: 'isLeaf',
  label: 'name'
}

const parentNode = ref<DictionaryInfoType>()

const treeEl = ref<InstanceType<typeof ElTree>>()

const treeData = ref<DictionaryInfoType[]>([
  { id: 'root', parentId: '', name: t('dbms.dicManager.valueTitle'), isLeaf: false, isParent: true }
])

//加载树代码
const loadNode = async (node: Node, resolve: (data: DictionaryInfoType[]) => void) => {
  if (node.level == 0) {
    initParams(treeData.value[0])
    return resolve(treeData.value)
  }
  const rs = await getTreeChildDictionaryInfoApi({ code: code.value, parentId: node.data.id })
  if (rs.success) {
    return resolve(rs.data)
  }
}

//树的点击事件
const clickTreeNode = (data: DictionaryInfoType) => {
  parentNode.value = data
  initParams(data)
  table.value.load(1)
}

const initParams = (data) => {
  queryFormType.parentId.value = data.id
  name.value = data.name
  initData.value.parentId = data.id
}

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delInfoApi({ id })
    if (rs.success) {
      table.value.load(1)
      updateKeyChildren()
    }
  })
}
//更新树
const updateKeyChildren = async () => {
  let parentId = 'root'
  if (parentNode.value) {
    if (parentNode.value.isLeaf) {
      parentId = parentNode.value.parentId
    } else {
      parentId = parentNode.value.id
    }
  }
  const rs = await getTreeChildDictionaryInfoApi({
    code: code.value,
    parentId: parentId
  })
  if (rs.success) {
    treeEl.value?.updateKeyChildren(parentId, rs.data)
  }
}

const flushed = () => {
  table.value.load(1)
  updateKeyChildren()
}

const show = (c: string) => {
  code.value = c
  initData.value.code = c
  queryFormType.code.value = c
  centerDialogVisible.value = true
}

//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

//暴露方法
defineExpose({ show, hide })
</script>

<style scoped></style>
